<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:text-align="http://www.w3.org/1999/xhtml"
      xmlns:shiro="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link th:href="@{/bootstrap-3.3.7-dist/css/bootstrap.min.css}" rel="stylesheet">
    <script type="text/javascript" th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>

    <style type="text/css">
        .top-buffer {
            margin-top: 40px;
        }
    </style>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <h1>磨具管理系统</h1>
        </div>
        <div class="col-md-6">
            <h4 class="text-right">欢迎您：<span th:text="${session.userinfo.getUser_name()}"></span></h4>
        </div>
    </div>

    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand active" href="#">管理</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">

                    <li><a th:href="@{/tooluser/tools}">磨具管理</a></li>

                    <li><a th:href="@{/user/sessionout}">退出系统</a></li>

                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li class="dropdown-header">Nav header</li>
                            <li><a href="#">Separated link</a></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </nav>


    <div class="col-md-10" th:if="${pageInfo} eq null">
        <span text-align:center><img th:src="@{/images/4.jpg}"></span>
        <span>让我看看又是哪个小可爱进了我的系统了呀 ~\(≧▽≦)/~ </span>
        <br>
        <!--            <div class="well">-->
        <!--                <p>Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。</p>-->
        <!--                <p>比如这就是一个WELL</p>-->
        <!--            </div>-->

    </div>

    <div class="col-md-10" th:if="${pageInfo} ne null">

        <form method="post" action="/tooluser/select">
            <input name="method" value="query" class="input-text" type="hidden">
            <span>磨具类别：</span>
            <input name="tool_sortCode" class="input-text" type="text">

            <input type="hidden" name="pageIndex" value="1"/>
            <input value="查 询" type="submit" id="searchbutton">

        </form>

        <br>


        <div class="row">
            <div class="col-md-12">
                <table class="table table-striped" id="emps_table">
                    <thead>
                    <tr>
                        <th>磨具ID</th>

                        <th>磨具名称</th>
                        <th>磨具是否报废</th>
                        <th>磨具使用者</th>
                        <th>磨具目前所在地</th>
                        <th>磨具类别</th>

                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="u : ${tools}">
                        <td th:text="${u.tool_id}"></td>

                        <td th:text="${u.tool_name}"></td>
                        <td th:text="${u.tool_invalid}"></td>
                        <td th:text="${u.tool_user}"></td>

                        <td th:text="${u.tool_posiotion}"></td>
                        <td th:text="${u.tool_sort}"></td>
                        <td>
                            <button th:attr="edit_url=@{/tooluser/edit/} + ${u.tool_id}"
                                    class="btn btn-warning update"
                                    id="emp_edit_modal_btn"
                                    data-toggle="modal"
                                    data-target="#myModal_edit">更新
                            </button>
                        </td>


                    </tr>
                    </tbody>
                </table>
            </div>

        </div>

        <!-- 显示分页信息 -->
        <div class="row">
            <!--分页文字信息  -->
            <div class="col-md-6" id="page_info_area">
                当前<span th:text="${pageInfo.pageNum}"></span>页，
                总<span th:text="${pageInfo.pages}"></span>页，
                总<span th:text="${pageInfo.total}"></span>条记录
            </div>
            <!-- 分页条信息 -->
            <div class="col-md-6" id="page_nav_area">
                <ul class="pagination">
                    <li><a th:href="'/user/users?pageNow='+${pageInfo.firstPage}">首页</a></li>
                    <li><a th:href="'/user/users?pageNow='+${pageInfo.prePage}"> << </a></li>
                    <li th:each="p : ${pageInfo.navigatepageNums}">
                        <a th:href="'/user/users?PageNow='+${p}" th:text="${p}"> </a>
                    </li>
                    <li><a th:href="'/user/users?pageNow='+${pageInfo.nextPage}"> >> </a></li>
                    <li><a th:href="'/user/users?pageNow='+${pageInfo.lastPage}">末页</a></li>
                </ul>
            </div>
        </div>

        <!--             Modal -->
        <div class="modal fade" id="myModal_add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel_add">添加磨具</h4>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="form-group">
                                磨具编码
                                <input  class="form-control" id="addtool_id" type="text" placeholder="email">
                            </div>

                            <div class="form-group">
                                磨具名称
                                <input type="text" class="form-control" id="addtool_name" placeholder="email">
                            </div>
                            <div class="form-group">
                                磨具类别
                                <input type="text" class="form-control" id="addtool_sort" placeholder="email">
                            </div>
                            <div class="radio">磨具是否报废
                                <label>
                                    <input type="radio" name="invalid" value="否" checked="true" id="addno"> 否
                                </label>
                                <label>
                                    <input type="radio" name="invalid" value="是" id="addyes"> 是
                                </label>

                            </div>

                            <div class="form-group">
                                磨具使用者
                                <input type="text" class="form-control" id="addtool_user" placeholder="email">
                            </div>
                            <div class="form-group">
                                磨具位置
                                <input type="text" class="form-control" id="addtool_position" placeholder="email">
                            </div>

                        </form>


                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="btn-add">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
        <!--           更新  Modal -->
        <div class="modal fade" id="myModal_edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel_edit">修改磨具信息</h4>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="form-group">
                                <input  class="form-control" id="tool_id" type="hidden" placeholder="email">
                            </div>
                            <div class="form-group">
                                磨具名称
                                <input type="text" class="form-control" id="tool_name" placeholder="email">
                            </div>
                            <div class="form-group">
                                磨具类别
                                <input type="text" class="form-control" id="tool_sort" placeholder="email">
                            </div>
                            <div class="radio">
                                磨具是否报废
                                <input type="text" class="form-control" id="tool_invalid" placeholder="email">
                            </div>

                            <div class="form-group">
                                磨具使用者
                                <input type="text" class="form-control" id="tool_user" placeholder="email">
                            </div>
                            <div class="form-group">
                                磨具位置
                                <input type="text" class="form-control" id="tool_position" placeholder="email">
                            </div>

                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="btn-edit">Save changes</button>
                    </div>
                </div>
            </div>
        </div>


        <!--           更新密码  Modal -->
        <div class="modal fade" id="myModal_editpassword" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel_editpassword">更新密码</h4>
                    </div>
                    <div class="modal-body">
                        <form>
                            <input id="editpassword_id" type="hidden">
                            <div class="form-group">
                                用户编码
                                <input type="text" class="form-control" id="editpassword_code">
                            </div>
                            <div class="form-group">
                                修改密码
                                <input type="password" class="form-control" id="editpassword">
                            </div>

                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="btn-editpassword">Save changes</button>
                    </div>
                </div>
            </div>
        </div>


        <!--           查看 Modal -->
        <div class="modal fade" id="myModal_check" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel_check">查看人员信息详情</h4>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="form-group">
                                用户ID
                                <input type="text" class="form-control" id="check_id" placeholder="code">
                            </div>

                            <div class="form-group">
                                用户编码
                                <input type="text" class="form-control" id="check_code" placeholder="code">
                            </div>
                            <div class="form-group">
                                用户名称
                                <input type="email" class="form-control" id="check_name" placeholder="name">
                            </div>
                            <div class="radio">
                                <label>
                                    <input class="edit_sex" type="radio" name="check_gender" value="1" id="mann"
                                           checked="true"> 男
                                </label>
                                <label>
                                    <input class="edit_sex" type="radio" name="check_gender" value="2" id="womann"> 女
                                </label>
                            </div>
                            <div class="form-group">
                                出生日期
                                <input type="text" class="form-control" id="check_birthday" name="check_birthday">
                            </div>
                            <div class="form-group">
                                电话
                                <input type="text" class="form-control" id="check_number" name="edit_address">
                            </div>
                            <div class="form-group">
                                地址
                                <input type="text" class="form-control" id="check_address" name="edit_address">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal" id="btn_check">Close</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
</div>

<script type="text/javascript">

    $('#btn-add').click(function () {
        var tool_id = $('#addtool_id').val();
        var tool_name = $('#addtool_name').val();
        var tool_sort = $('#addtool_sort').val();
        var tool_invalid = $("input[class='radio']:checked").val();
        var tool_user = $('#addtool_user').val();
        var tool_position = $('#addtool_position').val();
        //var birthday = $('#edit_birthday').val();
        $.ajax({
            type: "POST",
            url: "/tooladmin/add",
            // dataType: 'JSON',
            data: {
                'tool_id': tool_id,
                'tool_name': tool_name,
                'tool_sort': tool_sort,
                'tool_invalid': tool_invalid,
                'tool_user': tool_user,
                'tool_position': tool_position
            },
            success: function (result) {
                console.log(result);
                alert("添加成功");
                location.href = "/tooladmin/tools";
            },
            error: function (e) {
                console.log(e.status);
                console.log(e.responseText);
                alert("添加失败");
            }
        })

    })
    $('.update').click(function () {
        $link = $(this).attr('edit_url');
        $.ajax({
            type: "POST",
            contentType: "application/json;charset=UTF-8",
            url: $link,
            dataType: "JSON",

            success: function (result) {
                alert("获取数据成功！");
                var str = JSON.stringify(result);
                $('#tool_id').val(result.tool_id);
                $('#tool_name').val(result.tool_name);
                $('#tool_sort').val(result.tool_sort);
                $('#tool_invalid').val(result.tool_invalid);
                $('#tool_user').val(result.tool_user);
                $('#tool_position').val(result.tool_position);
                console.log(result);
            },
        });
    })
    $('.updatepassword').click(function () {
        $link = $(this).attr('editpassword_url');
        $.ajax({
            type: "POST",
            contentType: "application/json;charset=UTF-8",
            url: $link,
            dataType: "JSON",
            success: function (result) {
                alert("获取数据成功！");
                var str = JSON.stringify(result);
                $('#editpassword_id').val(result.id);
                $('#editpassword_code').val(result.userCode);
                $('#editpassword').val(result.userPassword);
                console.log(result);
            },
            error: function (e) {
                alert("获取失败");
                console.log(e.status);
                console.log(e.responseText);
            }

        });
    })
    $('.check').click(function () {
        $link = $(this).attr('check_url');
        $.ajax({
            type: "POST",
            contentType: "application/json;charset=UTF-8",
            url: $link,
            dataType: "JSON",
            success: function (result) {
                alert("获取数据成功！");
                var str = JSON.stringify(result);
                $('#check_id').val(result.id);
                $('#check_code').val(result.userCode);
                $('#check_name').val(result.userName);
                $('#check_birthday').val(result.birthday);
                $('#check_number').val(result.phone);
                $('#check_address').val(result.address);
                var sex = result.gender;
                if (sex == '1') {
                    $("#mann").prop("checked", true);
                } else {
                    $("#womann").prop("checked", true);
                }
                console.log(result);
            },
        });
    })

    $('.del_one').click(function () {
        $link = $(this).attr("del_url");
        if (confirm("确定删除？")) {
            $.ajax({
                type: "DELETE",
                url: $link,
                success: function (result) {
                    alert("删除成功");
                    console.log(result);
                    location.href = "/tooladmin/tools";
                },
                error: function (e) {
                    alert("删除失败");
                    console.log(e.status);
                    console.log(e.responseText);
                }
            })
        }
    });
    $('#btn-edit').click(function () {
        var tool_id = $('#tool_id').val();
        var tool_name = $('#tool_name').val();
        var tool_sort = $('#tool_sort').val();
        var tool_invalid =$('#tool_invalid').val();
        var tool_user = $('#tool_user').val();
        var tool_position = $('#tool_position').val();
        //var birthday = $('#edit_birthday').val();
        $.ajax({
            url: "/tooluser/edit",
            // dataType: 'JSON',
            type: "PUT",
            data: {
                'tool_id': tool_id,
                'tool_name': tool_name,
                'tool_sort': tool_sort,
                'tool_invalid': tool_invalid,
                'tool_user': tool_user,
                'tool_position': tool_position
            },
            success: function (result) {
                console.log(result);
                alert("保存成功");
                location.href = "/tooluser/tools";
            },
            error: function (e) {
                console.log(e.status);
                console.log(e.responseText);
                alert("保存失败");
            }
        })

    })
    $('#btn-editpassword').click(function () {
        var id = $('#editpassword_id').val();
        var code = $('#editpassword_code').val();
        var password = $('#editpassword').val();

        $.ajax({
            url: "/user/editpassword",
            // dataType: 'JSON',
            type: "PUT",
            data: {'id': id, 'userCode': code, 'userPassword': password},
            success: function (result) {
                console.log(result);
                alert("保存成功");
                location.href = "/";
            },
            error: function (e) {
                console.log(e.status);
                console.log(e.responseText);
                alert("保存失败");
            }
        })

    })

    $('#check_all').click(function () {
        if ($(this).is(":checked")) {
            $(".check_item").each(function () {
                $(this).prop("cheched", true);
            })
        } else {
            $(".check_item").each(function () {
                $(this).prop("cheched", false);
            })
        }
    });

    $('#myModal').on('shown.bs.modal', function () {
        alert("完全显示模态框");
    });

    $('#myModal').on('hide.bs.modal', function () {
        alert("隐藏模态框");
    });

    $('#myModal').on('hidden.bs.modal', function () {
        alert("完全隐藏模态框");
    });


</script>


</body>
</html>